$(function() {
    //1.实现剪裁的效果
    //1.1获取剪裁区的dom元素
    var $image = $('#image');
    console.log($image);


    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options);

    //2点击‘上传’能够选择图片
    $('.add').on('click', function() {
            $('#files').trigger('click'); //实现按钮   实现 files的功能
            //实现图片预览

        })
        //3.换图片之后，更换选裁掉区的图片，同时更换头像

    // 当文件域内容改变的时候，更换裁剪区的图片
    $('#files').on('change', function() {
            //找到文件对像
            var fileObj = this.files[0];
            //3.2调用js内置对象URL的createObjectURL方法为文件设置url
            var url = URL.createObjectURL(fileObj);
            // 销毁之前的剪裁区
            $image.cropper('destroy').attr('src', url).cropper(options);


        })
        //4.点击‘确定’，剪裁图片，同时更改头像

    $('.end').on('click', function() {
        // 裁剪功能
        var dataURL = $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串

        $.ajax({
            type: 'post',
            url: "/my/update/avatar",
            data: {
                avatar: dataURL
            },
            success: function(res) {
                layer.msg(res.message);
                if (res.status === 0) {
                    window.parent.tkoens();
                }
            }


        })
    })


})